<template>
  <div class="clearfix">
    <div class="site-navbar__header">
      <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
        <a class="site-navbar__brand-lg" href="javascript:;">Global CPQ System</a>
      </h1>
    </div>

    <div class="app_name__text">Global CPQ System</div>

    <div class="site-header__right">
      <span class="welcome">
        <span class="welcome__text"><i class="icon-user"></i>{{$t('siteHeader.welcome')}}，admin</span>
        <span class="logout" @click="logout">{{$t('siteHeader.logout')}}</span>
      </span>

      <span class="message">
        <el-badge :value="200" :max="99" class="item" @click="$router.push({ name: 'home' })">
          <span>{{$t('siteHeader.message')}}</span>
        </el-badge>
      </span>
      <span v-if="lang === 'zh-CN'"><router-link class="help" to="/zh-CN/help?action">{{$t('siteHeader.help')}}</router-link></span>
      <span v-else><router-link class="help" to="/en-US/help">{{$t('siteHeader.help')}}</router-link></span>
      <span class="language">
        <el-dropdown @command="switchLanguage">
          <span class="el-dropdown-link">
            {{$t('siteHeader.language')}}：{{ displayedLang }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="(value, key) in langs"
                  :key="key"
                  :command="key"><span class="language-item">{{ value }}</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </span>
    </div>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'

  export default {
    data () {
      return {
        langs: {
          'zh-CN': '中文',
          'en-US': 'English'
        }
      }
    },
    computed: {
      ...mapGetters([
        'en_cn'
      ]),
      lang () {
        return this.$route.path.split('/')[1] || 'zh-CN'
      },
      displayedLang () {
        return this.langs[this.lang] || '中文'
      }
    },
    created () {
      this.update_en_cn_state({lang: this.lang})
      this.$i18n.locale = this.lang === 'en-US' ? 'en' : 'zh'
    },
    methods: {
      ...mapActions({
        update_en_cn_state: 'common/update_en_cn_state'
      }),
      logout () {
        this.$router.push({ name: 'logout' })
        // todo: clear session
        window.location.reload()
      },
      switchLanguage (targetLang) {
        if (this.lang === targetLang) return

        localStorage.setItem('CPQ_LANGUAGE', targetLang)

        this.$i18n.locale = targetLang === 'en-US' ? 'en' : 'zh'

        this.update_en_cn_state({lang: targetLang})
        let toPath = '/' + targetLang // this.$route.path.replace(this.lang, targetLang)
        this.$router.push(toPath)
      }
    }
  }
</script>

<style lang="scss" scoped>

.site-navbar__brand-lg {
  text-indent: -9999px;
  display: inline-block;
  width: 120px;
  height: 65px;
  margin: 0 5px;
  background: url(../assets/img/logo.png) no-repeat center;
  background-size: contain;
}

.app_name__text {
  float: left;
  margin-left: 25px;
  font-size: 24px;
  color: #fff;
}

.site-header__right {
  float: right;
  height: 65px;
  font-size: 20px;
}

.welcome {
  line-height: 0;
  margin-right: 55px;
}

.icon-user {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: url(../assets/img/icons/icon-user.png) no-repeat center;
  background-size: contain;
  vertical-align: middle;
  margin-right: 10px;
  position: relative;
  top: -2px;
}

.logout {
  display: inline-block;
  color: #4ca8ff;
  margin-left: 10px;
  line-height: 1.5;
  padding: 0 5px;
  vertical-align: middle;
  cursor: pointer;
}

.message {
  display: inline-block;
  line-height: 1.5;
  margin-right: 40px;
  padding: 0 5px;
  cursor: pointer;
}

.help {
  color:#fff;
  display: inline-block;
  line-height: 1.5;
  margin-right: 30px;
  padding: 0 5px;
  cursor: pointer;
}

.area,
.language {
  display: inline-block;
  line-height: 1.5;
  margin-right: 15px;
  padding: 0 5px;
  cursor: pointer;

  :global(.el-dropdown) {
    color: #fff;
    font-size: 20px;
  }

}

.language-item {
  font-size: 16px;
}
</style>
